<template>
  <div class="box">
        <div class="header">
            <MyMtHeader titleText="我的购物车" />
            <div class="notice">
                <i class="van-icon van-icon-volume-o van-notice-bar__left-icon"></i>
                <span>当前购物车:{{cartNum}}件商品,合计金额:{{cartAllPrice}}</span>
            </div>
        </div>
        <div class="mian">
            <div class="item">
                <OrderDetailsItem   v-for="(item,index) in cartList" :key="index" :item="item"  />
            </div>
            <div class="mian-footer">
                <mt-cell title="选择联系人"  @click.native="show1 = !show1">
                    <div class="value">{{userName}}</div>
                </mt-cell>
                <mt-cell title="付款方式" @click.native="show2 = !show2" >
                    <div class="value">{{PaymentMethod}}</div>
                </mt-cell>
            </div>
        </div>
        <div class="footer">
            <mt-button type="primary">立即支付</mt-button>
        </div>
        <van-overlay :show="show1" >
            <div class="wrapper" @click.stop>
                <van-picker show-toolbar   @cancel="onCancel"  @confirm="onConfirm" :columns="columns" />
            </div>
        </van-overlay>
        <van-overlay :show="show2" >
            <div class="wrapper" @click.stop>
                <van-picker show-toolbar   @cancel="onCancel2"  @confirm="onConfirm2" :columns="columns2" />
            </div>
        </van-overlay>
  </div>
</template>

<script>
import MyMtHeader from '../MyMtHeader/MyMtHeader.vue'
import OrderDetailsItem from '../OrderDetailsItem/OrderDetailsItem.vue'
export default {
  components: { OrderDetailsItem, MyMtHeader },
    data(){
        return {
            cartList:[
                {
                "商品名称":'寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果',
                "单价":97.5,
                "数量":1
                },
                {
                "商品名称":'寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果',
                "单价":97.5,
                "数量":1
                }
            ],
            columns: [
                {text: '明明白白的小明',},
                {text: '稀里糊涂的小叶',},
                {text: '不知名的小明',}
            ],
            columns2: [
                {text: '钱包',},
                {text: '支付宝',},
                {text: '微信',}
            ],
            userName:'点击切换',
            PaymentMethod:'点击切换',
            show1:false,
            show2:false
        }
    },
    methods:{
        onConfirm(value){
            console.log(value.text)
            this.userName = value.text
            this.show1 = false
        },
        onCancel(){
            this.show1 = false
        },
        onConfirm2(value){
            this.PaymentMethod = value.text
            this.show2 = false
        },
        onCancel2(){
            this.show2 = false
        }
    },
    computed:{
        cartNum(){
        return this.cartList.length
        },
        cartAllPrice(){
        let countPrice = 0
        this.cartList.forEach(item=>{
            countPrice += item['单价'] * item['数量']
        })
        return  countPrice
        }
    }
}
</script>

<style scoped>
.box{
    position: relative;
    background: #e7e8e861;
}

.notice{
  text-align: left;
  padding: 5px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fffbe8;
  color: #ed6a0c;
  font-size: 14px;
}

.mian-footer >>> .mint-cell-title{
    text-align: left;
}
.footer .mint-button{
    margin-top: 20px;
    width: 100%;
}

.wrapper{
    position: absolute;
    width: 100%;
    bottom: 0px;
    left: 0;
}
</style>